<template>
  <div class="bg-gray-800/40 rounded-lg border border-gray-700 p-3 flex flex-col">
    <div class="text-xs text-gray-400 mb-1">{{ name }}</div>
    <div class="flex items-center justify-between">
      <div class="font-semibold">{{ value }}</div>
      <div :class="statusClass">
        <i class="fa" :class="statusIcon"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = {
  name: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  status: {
    type: String,
    default: 'normal',
    validator: (value) => {
      return ['normal', 'warning', 'error', 'offline'].includes(value);
    }
  }
};

// 计算状态相关的类
const statusClass = computed(() => {
  const classes = {
    normal: 'text-green-400',
    warning: 'text-yellow-400',
    error: 'text-red-400',
    offline: 'text-gray-500'
  };
  return classes[props.status];
});

const statusIcon = computed(() => {
  const icons = {
    normal: 'fa-check-circle',
    warning: 'fa-exclamation-triangle',
    error: 'fa-times-circle',
    offline: 'fa-power-off'
  };
  return icons[props.status];
});
</script>
